Cascading Style Sheets

HTML mode has support for CSS level 1. You can specify properties in a similar way as you insert HTML tags.

CSS flags

First let's discuss the settings which affect CSS.

Electric left braces (see below for Alpha 7.1 and later)
When checked, the left braces, {, will be electric like in C mode. That { is electric means that a carriage return will automatically be inserted and the next line will be indented when you type {. However, the braces only behaves in this way between STYLE tags (and SCRIPT tags when you are editing JavaScript). Outside SCRIPT and STYLE tags typing { always just inserts a {. By default the {'s are electric.

Electric right braces (see below for Alpha 7.1 and later)
When checked, the right braces, }, will be electric like in C mode. By default the }'s are electric.

Note! If you do not use an American keyboard, you may have to tell Alpha which keyboard you are using. Otherwise the electric braces won't work. This is done via the menu Config -> Global -> Preferences -> International.

Electric semicolon (see below for Alpha 7.1 and later)
When checked, the semicolons, ;, will be electric like in C mode. Just like the braces they are only electric between SCRIPT and STYLE tags. By default the ;'s are electric.

Color CSS keywords
If checked, keywords and comments in CSS will be colored. By default CSS keywords are not colored. Coloring of CSS keywords is not possible if 'simple coloring' is on.

Color of CSS keywords
The color of keywords in CSS. Applies only if you choose to color CSS keywords. The default is cyan (which actually isn't cyan at all).

Color of JavaScript and CSS comments
The color of comments in JavaScript and CSS. Applies only if you choose to color JavaScript or CSS keywords. The default is red.

Note! In Alpha 7.1 and later the preferences for electric braces and semicolons are set in the dialog Config -> Current Mode -> Menus and Features...

Key bindings between STYLE tags

You can type HTML elements between STYLE tags using the same key bindings as when you insert HTML tags. If you for example hit ctrl-cmd-Q for BLOCKQUOTE, while the current position is between STYLE tags, no HTML tags <BLOCKQUOTE></BLOCKQUOTE> are inserted. Instead the text BLOCKQUOTE is inserted.

Word completion

The word completion mechanism can save you time when editing CSS. See the page about word completion.

CSS properties

The various items in the Style Sheets submenu lets you specify CSS properties. What happens when you select such a menu item is the following.

First Alpha checks if there already are any values for the selected set of properties. Let's say you have the following in your document

H1 {
    color: #123456;
    text-align: right;
}

and the current position is somewhere between the braces. If you now choose 'Text' from the 'Style Sheet' menu, Alpha first looks for all text properties between the braces. In this case it would find 'text-align: right'.

A dialog window is now opened where you can specify the various properties. In the example, 'right' will be the default value for 'text-align' as that was the value found. If Alpha finds something it doesn't understand a warning message it shown. Everything Alpha doesn't understand will then be ignored.

When you have specified the values you want they are inserted and any old values deleted, in the example 'text-align: right'.

Because Alpha first inserts the new values and then deletes the old, you may have use 'Undo' more than ones to undo something.

! important

In CSS it is possible to increase the weight of a declaration by adding ! important at the end, for example

H1 {
    color: #FF0000 ! important;
}

In the property dialogs there is no way to say that a property should be marked by ! important, but if you make a change by using a property dialog Alpha remembers which ones are important and marks the same properties as important after the change.

The property dialogs

The property dialogs should be straight forward to use. Here are a few things to note though.

• For many properties there are two different kinds of values available, like for font-size where you can pick a size from a menu or give a size in the textbox. If you specify two different values Alpha will use the first one.
  
• When you specify a length or size, like for font-size, you can type the unit in the textbox rather than selecting it in the menu (faster). If you type a unit the one in the menu is ignored.
• In some cases there is a shorthand for a set of properties. Then there is a checkbox at the bottom of the dialog window. If this is checked Alpha will use the shorthand form if possible.
  
• For some properties, like margin, you can specify values for one or two sides and let these values also apply to the other sides. For such properties there will be two radio buttons where you can choose if you want to set the values individually or if you want the values specified also apply to the other sides.

  

Some properties can take more than one value or are special in some other way.

• For font-family you can select one family from the popup menu and add others separated by commas in the textbox.
• Background-position can take one or two values, either one or two from the popup menus or one or two lengths.
• Text-decoration can either take the value 'none' or up to four values from the popup menus.
• Border-style and border-color can take up to four values.

Limitation: Alpha does not support the properties border-top, border-right, border-left, and border-bottom. You can achieve the same result using the other border properties as with these four.

CSS mode

There is also a separate CSS mode for editing CSS documents (suffix .css). The functions in CSS mode are basically the same as in HTML mode. One important feature to notice is: CSS mode share key bindings with HTML mode. This sharing works like this:

• All menu items in the CSS menu, which you also find in the submenu Style Sheets in the HTML menu, have the same key binding. Ok, by default there are no key bindings at all, but as soon as you use 'Key bindings' in either HTML mode or CSS mode the bindings are set in both menus.
• As explained above you can use the key bindings for the HTML elements to insert them between STYLE tags in HTML mode. The same key bindings can be used in CSS mode to insert the HTML elements. If you for example hit ctrl-cmd-Q in CSS mode, the text BLOCKQUOTE is inserted.
• Whenever you change a key binding for an HTML element in HTML mode, the corresponding key binding in CSS mode is changed.

CSS menu

In the CSS menu, which you find to the right, all menu items above the separation line are the same as the menu items in the submenu Style Sheets in the HTML menu. The rest of the menu items are:

Reload in Browser
Reloads the frontmost window in your browser. The idea is that if the frontmost window in the browser uses the style sheet you are editing, you can quickly reload the page to see the effect of your changes to the style sheet. Reloading the page currently only works with Netscape and MSIE.

Colors...
To define colors. The same as the menu item 'Colors...' in the HTML Utilities menu.

Key Bindings...
To define key bindings for the menu. See the page about key bindings.

Preferences...
To set the preferences. CSS mode has its own preferences settings.

Electric left braces (see above for Alpha 7.1 and later)
When checked, the left braces, {, will be electric like in C mode. That { is electric means that a carriage return will automatically be inserted and the next line will be indented when you type {. By default the {'s are electric.

Electric right braces (see above for Alpha 7.1 and later)
When checked, the right braces, }, will be electric like in C mode. By default the }'s are electric.

Electric semicolon (see above for Alpha 7.1 and later)
When checked, the semicolons, ;, will be electric like in C mode. By default the ;'s are electric.

Cmd-double-clicking on non-text file link opens file
If checked, and you cmd-double-click on a link pointing to a non-text file it is opened in the application it was created in. If not checked, nothing happens when you click on such a link. By default the file is opened.

Color of keywords
The color of keywords in CSS. The default is blue.

Color of comments
The color of comments. The default is red.

Color of HTML
The color of HTML elements. The default is magenta.

wordBreak and wordBreakPreface
These two control which characters build up words.